$(function () {

    $.ajax({ url: "./data/position.json" })
        .then(rs => {
            // rs = JSON.parse(rs)
            render(rs)
        })

    function render(rs) {
        var dom = $("main .section2 .map .chart").get(0);
        var myChart = echarts.init(dom);
        var option;
        option = {
            index: 0,
            title: {
                text: '成都地区PM2.5趋势图',
                left: 'center',
                top: "5%",
                // textStyle: {
                //     color: '#fff'
                // }

            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return `${params.seriesName}:</br>${params.data.name}监测站:${params.data.value[2]}`
                },
                borderColor: 'rgba(255,255,255,0.2)',
            },

            bmap: {
                center: [103.57, 30.67],
                zoom: 9,
                // roam: false,
                mapStyle: {
                    styleJson: [
                        {
                            featureType: 'railway',
                            elementType: 'all',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        {
                            featureType: 'highway',
                            elementType: 'labels',
                            stylers: {
                                visibility: 'off'
                            }
                        },
                        
                    ]
                }
            },

            series: [
                {

                    name: 'PM2.5(μg/m³)',
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    // symbolSize: function (val) {

                    //     return val[2] / 3;
                    // },
                    label: {
                        formatter: '{b}',
                        position: 'right',
                        show: true,

                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },

            ],

            timeline: {
                data: (() => {
                    let month = new Array();
                    for (let i = 1; i <= 12; i++) {
                        month.push(i)
                    }
                    return [...month]
                })(),
                axisType: 'category',
                autoPlay: true,
                playInterval: 2000,
                // show: false,


                top: "1%",
                left: "68%",
                right: "23%",
                symbolSize: 0,
                lineStyle: {
                    show: false
                },
                label: {
                    show: false
                },
                // itemStyle:{
                //     opacity:0,
                // },
                checkpointStyle: {
                    symbolSize: 0
                },
                controlStyle: {
                    showPrevBtn: false,
                    // showNextBtn: false,
                    itemSize: 18
                }
            },
            options: [],

        };
        function op(index, name, unit, color, size) {

            let arr = []
            for (let i = 1; i <= 12; i++) {
                let month = `month${i}`
                let months = (i + '').padStart(2, '0')
                arr.push({
                    title: (() => {
                        return {
                            text: `成都地区${months}月${name}指数`
                        }
                    })(),
                    color: [color],
                    series: (() => {

                        let brr = []
                        brr.push({
                            symbolSize: function (val) {
                                return val[2] / size
                            },
                            name: `${name}(${unit})`,
                            data: (() => {
                                let crr = [];
                                rs.forEach(item => {

                                    crr.push({
                                        name: `${item.positionId + 1}号`,
                                        value: [item.lon, item.lat, item[month][index]],
                                    })
                                })
                                return crr;
                            })(),
                        })

                        return brr;
                    })(),
                })
            }
            return arr;
        }
        let $operate = $("#app main .section3 .operate")
        let oindex = {
            "PM25": 0,
            "PM10": 1,
            "SO2": 2,
            "NO2": 3,
            "CO": 4,
            "O3": 5,
        }
        let name = ["PM2.5", "PM10", "SO₂", "NO₂", "CO", "O₃"]
        let unit = ["μg/m³", "μg/m³", "μg/m³", "μg/m³", "mg/m³", "μg/m³"]
        let color = ["#03CC02", "#FEFD02", "#5470C6", "#FE0000", "#9B3366", "#815989"]
        let size = [2.5, 4, .5, 1.8, .035, 3]
        option.options = op(0, name[0], unit[0], color[0], size[0])
        myChart.setOption(option)

        $operate.click(event => {
            let preindex = option.index
            let index = oindex[$(event.target).prop("class")]
            if (preindex === index) return
            option.index = index
            option.options = op(index, name[index], unit[index], color[index], size[index])
            myChart.setOption(option)
            if (showData.length != 0) {
                show(showData)
            }
        })
        let showData = []
        myChart.on('click', function (params) {
            let clickIndex = params.dataIndex
            if (showData.indexOf(clickIndex) != -1) return
            showData.push(clickIndex)
            if (showData.length === 3) {
                showData.shift()
            }

            show(showData)
        });
        let $showChart = $("#app main .section2 .head .mainChart")
        let mainShowChart = echarts.init($showChart.get(0));
        let mainshowChartOption2 = {

            title: {
                // text: `${name[option.index]}指数`,
                left: 0,
                // textStyle: {
                //     color:'#fff'
                // }
            },
            tooltip: {
                trigger: 'axis',
                formatter: "{b0}月</br>{a0}:{c0}</br>{a1}:{c1}",
                axisPointer: {
                    animation: false
                },
                borderColor: 'rgba(255,255,255,0.2)',
            },
            legend: {
                right: 0,
                // textStyle: {
                //     color: '#fff'
                // },
                selectedMode: false,
            },
            axisPointer: {
                link: [
                    {
                        xAxisIndex: 'all'
                    }
                ]
            },
            grid: [
                {
                    containLabel: true,
                    left: 0,
                    height: '40%',
                    width: "90%",
                    bottom: "40%"
                },
                {
                    containLabel: true,
                    left: 0,
                    height: '40%',
                    width: "90%",
                    top: "44%"
                }
            ],
            xAxis: [
                //下面
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    boundaryGap: false,
                    axisLine: { onZero: true },
                    data: (() => {
                        let arr = []
                        for (let i = 1; i <= 12; i++) {
                            arr.push(i)
                        }
                        return arr
                    })(),
                    show: false,
                },
                //上面
                {

                    gridIndex: 1,
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    boundaryGap: false,
                    axisLine: { onZero: true },
                    data: (() => {
                        let arr = []
                        for (let i = 1; i <= 12; i++) {
                            arr.push(i)
                        }
                        return arr
                    })(),
                    axisLine: {
                        // lineStyle: {
                        //     color: '#fff'
                        // },
                        symbol: ["none", "arrow"],
                        symbolSize: [8, 10],
                        symbolOffset: [0, 8],
                    },
                    position: 'top',
                    axisLabel: {
                        padding: [0, 0, -6, 10]
                    },
                }
            ],
            yAxis: [
                {
                    // name: 'μg/m3',
                    type: 'value',
                    // max: 500
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        // lineStyle: {
                        //     color: '#fff'
                        // },
                        symbol: ["none", "arrow"],
                        symbolSize: [8, 10],
                        symbolOffset: [0, 10],
                    }
                },
                {
                    gridIndex: 1,
                    // name: '(mm)',
                    type: 'value',

                    inverse: true,
                    splitLine: {
                        show: false,
                    },
                    axisLine: {
                        show: true,

                        // lineStyle: {
                        //     color: '#fff'
                        // },
                        symbol: ["arrow", "none"],
                        symbolSize: [8, 10],
                        symbolOffset: [0, -10],
                    },

                }
            ],
            series: [
                {
                    // name: 'Evaporation',
                    type: 'line',
                    symbolSize: 8,
                    // prettier-ignore
                    data: [22, 33, 2,],
                    smooth: true,
                },
                {
                    // name: 'Rainfall',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    symbolSize: 8,
                    // prettier-ignore
                    data: [15, 34, 30],
                    smooth: true,
                }
            ]
        };
        let mainshowChartOption1 = {
            title: {
                // textStyle: {
                //     color: '#fff'
                // },
                left: 0,
                top: 0
            },
            tooltip: {
                borderColor: 'rgba(255,255,255,0.2)',
                formatter: "{b}月</br>{c}"
            },
            grid: {
                containLabel: true,
                left: 0,
                width: "90%",
                bottom: 0,

            },
            legend: {
                data: [],
                right: 0,
                top: 0,
                // textStyle: {
                //     color: '#fff'
                // },
                selectedMode: false,
            },
            xAxis: {
                data: (() => {
                    let arr = []
                    for (let i = 1; i <= 12; i++) {
                        arr.push(i)
                    }
                    return arr
                })(),
                axisTick: {
                    show: false
                },
                axisLine: {
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }

            },
            yAxis: {
                // name: 'μg/m³',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                }
            },


            series: [
                {
                    type: 'line',
                    smooth: true,
                },
            ]
        }
        let $detailChart = $("#app main .section2 .head .detailChart")
        let detailChart = echarts.init($detailChart.get(0))
        let detailChartOption = {
            grid: {
                left: 0,
                width: "95%",
                bottom: 0,
                containLabel: true
            },
            tooltip: {
                borderColor: 'rgba(255,255,255,0.2)',

            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                    symbol: ["none", "arrow"],
                    symbolSize: [8, 10],
                    symbolOffset: [0, 8],
                },
            },
            yAxis: {
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    // lineStyle: {
                    //     color: '#fff'
                    // },
                },
                type: 'category',
                data: ["极\n小\n值", "平\n均\n值", "极\n大\n值"],
                axisLabel: {
                    // rotate:90,
                }
            },
            series: [
            ]
        }

        function show(arr) {
            let $time = $("#app main .section2 .head .time")
            $time && $time.remove()
            $("header .time").css({
                display: 'block'
            })
            if (arr.length === 0) return
            let arrData = []
            arr.forEach(item => {
                arrData.push({
                    positionId: (() => {
                        return rs[item].positionId;
                    })(),
                    airData: (() => {
                        let temp = []
                        for (let i = 1; i <= 12; i++) {
                            let month = `month${i}`
                            temp.push(rs[item][month][option.index])
                        }
                        return temp
                    })(),
                    type: option.index,
                    max: (() => {
                        let max = rs[item].month1[option.index]
                        for (let i = 2; i <= 12; i++) {
                            let month = `month${i}`;
                            rs[item][month][option.index] > max ? max = rs[item][month][option.index] : max
                        }
                        return max
                    })(),
                    min: (() => {
                        let min = rs[item].month1[option.index]
                        for (let i = 2; i <= 12; i++) {
                            let month = `month${i}`;
                            rs[item][month][option.index] < min ? min = rs[item][month][option.index] : min
                        }
                        return min
                    })(),
                    average: (() => {
                        let sum = 0;
                        for (let i = 1; i <= 12; i++) {
                            let month = `month${i}`;
                            sum += rs[item][month][option.index]
                        }
                        return Math.floor(sum / 12 * 100) / 100
                    })(),
                })
            })
            detailChartOption.xAxis.name = `${unit[arrData[0].type]}`
            arrData.forEach(item => {
                detailChartOption.series.push({
                    name: `${item.positionId + 1}号监测站`,
                    data: [item.min, item.average, item.max],
                    type: 'bar',
                })
            })
            detailChart.setOption(detailChartOption, true)
            window.addEventListener('resize', detailChart.resize);
            detailChartOption.series = []
            if (arrData.length === 1) {
                mainshowChartOption1.title.text = `${arrData[0].positionId + 1}号监测站${name[arrData[0].type]}指数`;
                mainshowChartOption1.yAxis.name = `${unit[arrData[0].type]}`;
                mainshowChartOption1.series[0].data = arrData[0].airData;
                mainShowChart.setOption(mainshowChartOption1, true);
                window.addEventListener('resize', mainShowChart.resize);

            }
            if (arrData.length === 2) {

                mainshowChartOption2.title.text = `${name[arrData[0].type]}指数`;
                mainshowChartOption2.yAxis.forEach(item => {
                    item.name = `${unit[arrData[0].type]}`
                });

                let i = 0;
                mainshowChartOption2.series.forEach(item => {
                    item.name = `${arrData[i].positionId + 1}号监测站`;
                    item.data = arrData[i].airData
                    i++
                })



                mainShowChart.setOption(mainshowChartOption2, true)
                window.addEventListener('resize', mainShowChart.resize);
            }


        }
        window.addEventListener('resize', myChart.resize);
    }

})
